<template>
  <div>

    <!--   模态框  -->
    <el-dialog
      :title="title"
      :visible.sync="centerDialogVisible"
      width="30%"
      center>

      <el-input placeholder="请输入用户名" v-model="userform.name" ></el-input>
      <el-input placeholder="请输入地址" v-model="userform.address" ></el-input>

      <span slot="footer" class="dialog-footer">
    <el-button @click="canel">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
    </el-dialog>

    <!--工具条    -->
    <el-container style="height: 700px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu     router
                     :default-active="this.$router.path"

                     :default-openeds="['1', '2','3']"

                     class="el-menu-vertical-demo"

                     background-color="#545c64"

                     text-color="#fff"

                     active-text-color="#ffd04b">

          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>电影项目管理</template>
            <el-menu-item-group>
              <template slot="title">编剧管理</template>
              <el-menu-item index="/novel" >小说表</el-menu-item>
              <el-menu-item index="/writer">作家表</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="电影管理">
              <el-menu-item index="/film">电影表</el-menu-item>
              <el-menu-item index="/log">日志表</el-menu-item>
            </el-menu-item-group>

          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>电影人员管理</template>
            <el-menu-item-group>
              <template slot="title">人员管理</template>
              <el-menu-item index="/department">部门信息</el-menu-item>
              <el-menu-item index="/permissions">权限管理</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>用户管理</template>
            <el-menu-item-group>
              <template slot="title">用户信息管理</template>
              <el-menu-item index="/user">用户信息</el-menu-item>
              <el-menu-item index="/userpicture">用户照片</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
        </el-menu>
      </el-aside>


      <el-container>
        <el-header style="text-align: -moz-right; font-size: 12px">
          <!-- 同步queryuserpictureName 查询绑定点击时间findAll()       -->
          <el-input placeholder="请输入关键字" v-model="queryuserpictureName" style="width:180px" ></el-input>
          <el-button type="primary" @click="findAll()">查询</el-button>
          <el-button type="success" @click="update()" plain icon="el-icon-check" circle>添加</el-button>
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span >管理员</span>
        </el-header>
      </el-container>
    </el-container>



  </div>

</template>

<script>
  export default {
    data() {
      return {
        tableData: [],
        // 模态框数据
        title:"新增用户",
        userform:{},
        // 是否弹出模态框
        centerDialogVisible: false,
        // 高级查询参数
        queryuserpictureName:null,
        // 总条数
        totals: 0,
        pageSize:5,
        currentPage:1,
      }
    },
  }
</script>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
